import React,{useEffect} from 'react';
import {actions} from "./store";
import {useDispatch, useSelector} from "react-redux";
import {Redirect} from "react-router-dom";
import {Helmet} from "react-helmet";

//组件
const Translate = () => {
  const store = useSelector((state) => {
    // console.log('state:', state);
    return {
      list: state.translate.translateList,
      login: state.header.login
    }
  });

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(actions.getTranslationList());
  }, []);

  return (
    store.login ?
      <>
        {/** 默认只会在客户端生效(mounted和路由切换时)
          除此之外如果还想要服务端渲染这个SEO信息, 需要在react-ssr.js renderToString后 调用Helmet.renderStatic方法获取到要渲染的seo信息(也就是这里设置的)*/}
        <Helmet>
          <title>这是SSR的翻译页面 - 丰富多彩的翻译内容</title>
          <meta name='description' content='这是SSR的翻译页面 - 丰富多彩的翻译内容'/>
        </Helmet>
        <div>
          Translate
          {
            store.list.map(item => (
              <div key={item.id}>{item.title}</div>
            ))
          }
        </div>
      </>
      :
      <Redirect to='/'/>/** ←仅限于客户端,服务端是不认的,但如果是在服务端,且使用了StaticRouter,那么会往StaticRouter的context属性对象里塞入一些数据(如果使用<Redirect>组件的话)*/
  );
};

Translate.loadData = (store) => {
  return store.dispatch(actions.getTranslationList())
};

export default Translate
